﻿<div class="drawer-wrapper @(_isOpen ? "slide" : "")">
    <div class="drawer-mask"></div>
    <div class="drawer">
        @if (_activeTrail is not null)
        {
            <div class="drawer-content">
                <img src="@_activeTrail.Image" />
                <div class="trail-details">
                    <h3>@_activeTrail.Name</h3>
                    <h6 class="mb-3 text-muted"><span class="oi oi-map-marker"></span> @_activeTrail.Location</h6>
                    <div class="mt-4">
                        <span class="mr-5"><span class="oi oi-clock mr-2"></span> @_activeTrail.TimeFormatted</span>
                        <span><span class="oi oi-infinity mr-2"></span> @_activeTrail.Length km</span>
                    </div>
                    <p class="mt-4">@_activeTrail.Description</p>
                </div>
            </div>
            <div class="drawer-controls">
                <button class="btn btn-secondary" @onclick="Close">Close</button>
            </div>
        }
    </div>
</div>

@code {
    private bool _isOpen;
    private Trail? _activeTrail;

    [Parameter, EditorRequired] public Trail? Trail { get; set; }

    protected override void OnParametersSet()
    {
        if (Trail != null)
        {
            _activeTrail = Trail;
            _isOpen = true;
        }
    }

    private void Close()
    {
        _activeTrail = null;
        _isOpen = false;
    }
}
